<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最终效果</title>
    <link rel="stylesheet" href="./css/box.css">
    <link rel="stylesheet" href="./css/box2.css">
    <style>
        .btn-group{
            display: flex;
            justify-content: center;
        }
        .btn-group>button{
            background-color: transparent;
            color: wheat;
            border: 1px solid currentColor;
            padding: 5px;
            margin: 0 5px;
            min-width: 100px;
            cursor: pointer;
        }
        .btn-group>button:hover{
            /* 鼠标悬停在该对象上的效果 */
            color: aquamarine;
        }
        
        #common{
            border: none;
        }

        #common>img{
            /* 每个图片添加过渡效果 */
            transition: all 0.5s linear;
        }

        /* 让过渡效果依次进行 */
        #common>img:nth-child(1){
            /* 过渡等待效果等待0秒 */
            transition-delay: 0s;
        }
        #common>img:nth-child(2){
            transition-delay: 0.2s;
        }
        #common>img:nth-child(3){
            transition-delay: 0.4s;
        }
        #common>img:nth-child(4){
            transition-delay: 0.6s;
        }
        #common>img:nth-child(5){
            transition-delay: 0.8s;
        }
        #common>img:nth-child(6){
            transition-delay: 1s;
        }

        #common>img:nth-child(7){
            transition-delay: 1.8s;
        }
        #common>img:nth-child(8){
            transition-delay: 1.2s;
        }
        #common>img:nth-child(9){
            transition-delay: 1.4s;
        }
        #common>img:nth-child(10){
            transition-delay: 1.6s;
        }
        #common>img:nth-child(11){
            transition-delay: 2s;
        }
        #common>img:nth-child(12){
            transition-delay: 2.2s;
        }

        /* 定义一个动画 */
        @keyframes commonRotate{
            from{
                transform: rotateX(-10deg) rotateY(10deg);
            }
            to{
                transform: rotateX(-10deg) rotateY(370deg);
            }
        }
        /* 使用动画 */
        #common{
            /* 动画名称 */
            animation-name: commonRotate;
            /* 动画执行的时间 */
            animation-duration: 15s;
            /* 动画执行的次数 infinite 无限次*/
            animation-iteration-count: infinite;
            /* 动画运行效果 linear 匀速 */
            animation-timing-function: linear;
            /* 动画播放效果 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="btn-group">
        <button type="button" onclick="changeToRing()">环形</button>
        <button type="button" onclick="changeToSquare()">正方体</button>
        <button type="button" onclick="playRotate(this)">旋转/暂停</button>
    </div>
    <div class="box" id="common">
        <img src="./img/cleer ARC ll.png" alt="">
        <img src="./img/Hi novaMate 50 Pro.png" alt="">
        <img src="./img/KARCHERWD 1s.png" alt="">
        <img src="./img/Redmi Note 12 Turbo.png" alt="">
        <img src="./img/联想拯救者R7000.png" alt="">
        <img src="./img/华硕天选4.png" alt="">
        <img src="./img/小米Redmi K70.png" alt="">
        <img src="./img/彩族C6.png" alt="">
        <img src="./img/惠普16-wf0032TX.png" alt="">
        <img src="./img/戴尔MS116有线鼠标.png" alt="">
        <img src="./img/班尼路（Baleno）.png" alt="">
        <img src="./img/织造司原创明制国风.png" alt="">
    </div>
</body>
<script>
    function changeToRing(){
        let common = document.querySelector("#common");
        common.className = "box";
    }
    function changeToSquare(){
        let common = document.querySelector("#common");
        common.className = "box2";
    }
    function playRotate(setButton){
        let common = document.querySelector("#common");
        let state = getComputedStyle(common).animationPlayState;
        if(state == "running"){
            //动画正在运行
            common.style.animationPlayState = "paused";
            setButton.innerText = "开始动画"
        }else{
            //动画是暂停的
            common.style.animationPlayState = "running";
            setButton.innerText = "暂停动画"
            
        }
    }
</script>
</html>